<template>
    <div>
        <el-tabs tab-position="left" style="height: 200px" class="demo-tabs">
            <el-tab-pane label="待审批的">
                <el-row class="flex items-end">
                    <el-col :span="14">
                        <div class="flex justify-between">
                            <div class="flex flex-col w-34 min-w-min">
                                <label>类型</label>
                                <!-- 下拉框 -->
                                <el-select placeholder="请选择类型">
                                    <el-option label="全部" value=""></el-option>
                                    <el-option label="全部" value=""></el-option>
                                    <el-option label="全部" value=""></el-option>
                                </el-select>
                            </div>

                            <div class="flex flex-col  w-34 min-w-min">
                                <label>名称</label>
                                <!-- 下拉框 -->
                                <el-input placeholder="请输入名称"></el-input>
                            </div>

                            <div class="flex flex-col  w-34 min-w-min">
                                <label>状态</label>
                                <!-- 下拉框 -->
                                <el-select placeholder="请选择状态">
                                    <el-option label="全部" value=""></el-option>
                                    <el-option label="全部" value=""></el-option>
                                    <el-option label="全部" value=""></el-option>
                                </el-select>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="9" class="ml-2">
                        <el-button :icon="Search" type="primary">搜索</el-button>
                        <el-button :icon="Delete" type="danger">重置</el-button>
                    </el-col>
                </el-row>

                <el-table :data="state.workorderList" style="width: 100%" @selection-change="handleSelectionChange"
                    class="mt-4">
                    <el-table-column prop="ID" label="序号" fixed="left" width="80" align="center" />
                    <el-table-column prop="WorkOrderName" label="工单名称" align="center">
                        <template #default="scope">
                            {{ scope.row.workOrderData.WorkOrderName }}
                        </template>
                    </el-table-column>
                    <el-table-column label="被委派人" align="center">
                        <template #default="scope">
                            {{ scope.row.assignedToUserName.Name }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="CreatedUserID" label="委派人" align="center">
                        <template #default="scope">
                            {{ scope.row.workOrderData.createdUserName.Name }}
                        </template>
                    </el-table-column>
                    <el-table-column label="状态" align="center">
                        <template #default="scope">
                            <el-tag v-if="scope.row.CreatedDate < getDay()" type="danger">未完成</el-tag>
                            <el-tag :type="scope.row.Status == '1' ? '已完成' : '进行中' ? 'success' : 'warning'" v-else>
                                {{ scope.row.Status == '1' ? '已完成' : '进行中' }}
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column fixed="right" label="操作" align="center" width="180">
                        <el-button link size="small" @click.prevent="deleteRow_w(scope.row)">
                            <el-icon>
                                <View />
                            </el-icon>
                            查看
                        </el-button>
                    </el-table-column>
                </el-table>
                <el-pagination @size-change="handlehSizeChange" @current-change="handlehCurrentChange"
                    :page-sizes="[5, 8, 10]" :page-size="state.pageSize" layout="total, jumper, prev, pager, next, sizes"
                    :total="state.total" class="mt-2">
                </el-pagination>
            </el-tab-pane>
            <el-tab-pane label="我审批的">
                <el-row class="flex items-end">
                    <el-col :span="14">
                        <div class="flex justify-between">
                            <div class="flex flex-col w-34 min-w-min">
                                <label>类型</label>
                                <!-- 下拉框 -->
                                <el-select placeholder="请选择类型">
                                    <el-option label="全部" value=""></el-option>
                                    <el-option label="全部" value=""></el-option>
                                    <el-option label="全部" value=""></el-option>
                                </el-select>
                            </div>

                            <div class="flex flex-col  w-34 min-w-min">
                                <label>名称</label>
                                <!-- 下拉框 -->
                                <el-input placeholder="请输入名称"></el-input>
                            </div>

                            <div class="flex flex-col  w-34 min-w-min">
                                <label>状态</label>
                                <!-- 下拉框 -->
                                <el-select placeholder="请选择状态">
                                    <el-option label="全部" value=""></el-option>
                                    <el-option label="全部" value=""></el-option>
                                    <el-option label="全部" value=""></el-option>
                                </el-select>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="9" class="ml-2">
                        <el-button :icon="Search" type="primary">搜索</el-button>
                        <el-button :icon="Delete" type="danger">重置</el-button>
                    </el-col>
                </el-row>


            </el-tab-pane>
            <el-tab-pane label="我申请的">
                <el-row class="flex items-end">
                    <el-col :span="14">
                        <div class="flex justify-between">
                            <div class="flex flex-col w-34 min-w-min">
                                <label>类型</label>
                                <!-- 下拉框 -->
                                <el-select placeholder="请选择类型">
                                    <el-option label="全部" value=""></el-option>
                                    <el-option label="全部" value=""></el-option>
                                    <el-option label="全部" value=""></el-option>
                                </el-select>
                            </div>

                            <div class="flex flex-col  w-34 min-w-min">
                                <label>名称</label>
                                <!-- 下拉框 -->
                                <el-input placeholder="请输入名称"></el-input>
                            </div>

                            <div class="flex flex-col  w-34 min-w-min">
                                <label>状态</label>
                                <!-- 下拉框 -->
                                <el-select placeholder="请选择状态">
                                    <el-option label="全部" value=""></el-option>
                                    <el-option label="全部" value=""></el-option>
                                    <el-option label="全部" value=""></el-option>
                                </el-select>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="9" class="ml-2">
                        <el-button :icon="Search" type="primary">搜索</el-button>
                        <el-button :icon="Delete" type="danger">重置</el-button>
                    </el-col>
                </el-row>


            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script setup>
import { onMounted, reactive } from 'vue';
import { Search, Delete, View } from '@element-plus/icons-vue'
import { workorderRead } from '../api/workorder/workorder';
const state = reactive({
    workorderList: ''
})
const init = async () =>
{

}
onMounted(() =>
{
    init()
})
</script>

<style lang="sass" scoped>

</style>